<template>
	<view>
		<view class="uni-header">
			<view class="uni-group">
				<view class="uni-title"></view>
				<view class="uni-sub-title"></view>
			</view>
			<view class="uni-group">
				<button class="uni-button" type="default" size="mini" @click="add">添加</button>
			</view>
		</view>
		<view class="uni-container">
			<unicloud-db ref="udb" :collection="collectionName" :options="options" :where="where" field="" page-data="replace"
			 :orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
			 v-slot:default="{data,pagination,loading,error}">
				<uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
					<uni-tr>
						<uni-th align="center">标题</uni-th>
						<uni-th align="center">内容</uni-th>
						<uni-th width="80" align="center">类型</uni-th>
						<uni-th width="170" align="center">创建时间</uni-th>
						<uni-th width="204" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item,index) in data" :key="index">
						<uni-td align="center">{{item.title}}</uni-td>
						<uni-td align="center">{{item.content}}</uni-td>
						<uni-td align="center">{{gettype(item.type)}}</uni-td>
						<uni-td align="center">
							<uni-dateformat :date="item.createtime * 1000" :threshold="[0, 0]" />
						</uni-td>
						<uni-td align="center">
							<view class="uni-group">
								<button @click="update(item)" class="uni-button" size="mini" type="primary">修改</button>
								<button @click="remove(item)" class="uni-button" size="mini" type="warn">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count"
					 @change="onPageChanged" />
				</view>
			</unicloud-db>
		</view>
		<uni-popup ref="passwordPopup" type="center">
			<view class="modal" style="width:400px; padding: 20px;">
				<AddHelp @closeHelpPopup="closeHelpPopup" :item="item" :title="title"/>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database()
	// 表查询配置
	const dbCollectionName = 'helpinfo'
	const dbOrderBy = 'createtime desc' // 排序字段
	const dbSearchFields = [] // 支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 10
	const pageCurrent = 1
	import AddHelp from '@/windows/components/add-help.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
		    AddHelp
		},
		data() {
			return {
				query: '',
				where: '',
				orderby: dbOrderBy,
				collectionName: dbCollectionName,
				options: {
					pageSize,
					pageCurrent
				},
				item:{
					"title":"",
					"content":"",
					"type":"zhuce",
					"caozuo":"add"
				},
				title:""
			}
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			add() {
				this.title = "添加帮助"
				this.item={
					"title":"",
					"content":"",
					"type":"zhuce",
					"caozuo":"add"
				},
				this.$refs.passwordPopup.open()
			},
			loadData(clear = true) {
				this.$refs.udb.loadData({
					clear
				})
			},
			onPageChanged(e) {
				this.$refs.udb.loadData({
					current: e.current
				})
			},
			update(item) {
				this.title = "修改帮助"
				this.item = item
				this.item['caozuo'] = "update"
				this.$refs.passwordPopup.open()
			},
			remove(item) {
				this.title = "删除帮助"
				this.item = item
				this.item['caozuo'] = "remove"
				this.$refs.passwordPopup.open()
			},
			closeHelpPopup(){
				this.$refs.passwordPopup.close()
				this.loadData()
			},
			gettype(type){
				if(type=='zhuce'){
					return "注册"
				}else if(type == "youxi"){
					return "游戏"
				}else if(type == "tixian"){
					return "提现"
				}
			}
		}
	}
</script>
<style>
	.modal {
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	
	.modal-content {
		padding: 15px;
		height: 500px;
		box-sizing: border-box;
	}
	
	.password-popup {
		padding: 30px;
	}
</style>
